<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>AlloyLever - 1kb js library contains development debugging, error monitoring and reporting, user problem localization features</title>

    <style>
        html,body{
            padding:0;
            margin: 0;
            overflow: hidden;
        }
        canvas{
            padding:0;
            margin: 0;
            border: 0;
        }

        #container{
            text-align: center;
        }
    </style>

    <style>
        body {
            background-color: #1e1d23;
            /*opacity: 0;*/
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 2px;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /*body.ready { opacity: 1; }*/


        .icon-text path,
        .icon-text polygon {
            /*opacity: 0;*/
        }

        .info {
            text-align: center;
        }

        .description {
            /*opacity: 0;*/
            color: white;
            font-size: 15px;
            margin-bottom:100px ;
        }

        .links {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-top: 20px;
        }

        @media (min-width: 700px) {
            .links {
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -ms-flex-direction: row;
                flex-direction: row;

            }
        }

        .button {
            /*opacity: 0;*/
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 180px;
            height: 60px;
            text-decoration: none;
        }

        .button.blue {
            color: #5E89FB;
        }

        .button.green {
            color: #18F38C;
        }

        .button.red {
            color: #FF1461;
        }

        .button svg {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            stroke-width: 1;
            fill: none;
            fill-rule: evenodd;
            stroke: currentColor;
        }

        .button.green svg {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .button path {
            scale: .9;
            transform-origin: 50% 50%;
        }

        .credits {
            /*opacity: 0;*/
            margin-top: 20px;
            color: #979797;
        }

        .credits a {
            position: relative;
            color: currentColor;
            text-decoration: none;
        }

        .credits a:after {
            content: "";
            /*opacity: 0;*/
            display: block;
            position: absolute;
            left: 0;
            bottom: -3px;
            width: 100%;
            border-bottom: 1px solid currentColor;
            transition: opacity .75s ease;
        }

        /*.credits a:hover:after {
          opacity: 1;
          transition: opacity .25s ease;
        }*/

        .credits a,
        .credits span {
            transition: color .75s ease;
        }

        .credits a:hover,
        .highlighted {
            color: white;
            transition: color .25s ease;
        }

        #container{
            color: white;
            height: 40px;
            line-height: 40px;
            font-size: 40px;
            margin-top:200px ;
        }

        @media only screen and (max-width: 500px) {
            #container {
                margin-top:100px ;
                font-size: 35px;
            }
            .description {
                font-size: 13px;
                margin-bottom:10px ;
            }
        }
    </style>
</head>

<body>
<div id="container">
    AlloyLever
</div>
<div class="info">
    <p class="description">
        1kb js library contains development debugging, error monitoring and reporting, user problem localization features
    </p>
    <div class="links">
        <a class="button blue" href="https://github.com/AlloyTeam/AlloyLever#usage" target="_blank">
            <svg viewBox="0 0 180 60">
                <path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"></path>
            </svg>
            <span>Docs</span>
        </a>
        <a class="button blue" id="entry" href="javascript:" >
            <svg viewBox="0 0 180 60">
                <path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"></path>
            </svg>
            <span>Click me 6 times!</span>
        </a>
        <a class="button green" href="https://github.com/AlloyTeam/AlloyLever" target="_blank">
            <svg viewBox="0 0 180 60">
                <path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"></path>
            </svg>
            <span>GitHub</span>
        </a>
    </div>
    <p class="credits">
        v<span class="version">1.0.0</span> © <span class="date">2017</span> AlloyTeam.com
    </p>
</div>




<script src="alloy-lever.js"></script>
<script>
    AlloyLever.config({
        cdn:'//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js',
        reportUrl: "//a.qq.com",
        reportPrefix: 'abc',
        reportKey: 'msg',
        otherReport: {
            uin: 100000
        },
        entry:"#entry"
    })

</script>
    <pre>
    <code>
        AlloyLever.config({
            cdn:'//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js',
            reportUrl: "//a.qq.com",
            reportPrefix: 'abc',
            reportKey: 'msg',
            otherReport: {
                uin: 491862102
            },
            entry:"#entry"
        })

        console.log('this is log content')
        console.info('this is info content')
        console.debug('this is debug content')
        console.warn('this is warn content')
        console.error('this is error content')

    </code>
    </pre>
<script>

    console.log('this is log content')
    console.info('this is info content')
    console.debug('this is debug content')
    console.warn('this is warn content')
    console.error('this is error content')

    //入口
    //AlloyLever.entry('#entry')
    //也可以埋在多个入口
    //AlloyLever.entry('#entry2')
</script>
</body>
</html>
